<template>
	<div class="person">
		<h1>情况二：监视ref定义的对象类型数据</h1>
		<h2>姓名：{{person.name}}</h2>
		<h2>年龄：{{person.age}}</h2>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePreson">换人</button>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
//数据
let person = ref({
	name:'张三',
	age:18,
})
function changeName(){
	person.value.name += '^'
}
function changeAge(){
	person.value.age += 1
}

function changePreson(){
	person.value = {name:"李四",age:19};
}
//监视，情况一：监视ref定义的对象类型数据，监视是对象的地址值
//若想监视对象内部属性的变化，需要手动配置
watch(person,(newVal,oldVal)=>{
	console.log('person',newVal,oldVal);
},{
	//深度监视
	deep:true,
	//立即监视
	immediate:true,
})
</script>
<style>
.person {
	padding: 10px;
}
</style>
